/**
 * 包间搜索
 * @author: minzhang
 * @update: 2017-03-15
 */

import React, { PropTypes } from 'react';
import { Row, Col, Button, Form, Input, Select } from 'antd';

const FormItem = Form.Item;
const Option = Select.Option;

const RoomsManageSearch = ({
	onSubmit,
	form: {
		getFieldDecorator,
		getFieldsValue,
		resetFields,
		setFieldsValue,
	},
}) => {
	
  // labelcol wrappercol间距大小
	const formItemLayout = {
		labelCol: {
			span: 5,
		},
		wrapperCol: {
			span: 17,
		},
	};
	
	// 搜索
	function handleSubmit() {
		onSubmit(getFieldsValue());
	}
	
	// 清除条件
	function handleReset(e){
		e.preventDefault();
		resetFields();
	};
	
	return (
		<div style={{padding: '20px 0',}}>
			<Form layout="horizontal" className="ant-advanced-search-form">
			
				<Row>
					<Col span={8}>
						<FormItem
							label="包间名"
							{...formItemLayout}
						>
							{getFieldDecorator('_query_tech_no')(
								<Input placeholder="请输入包间名" size="default" />
							)}
						</FormItem>
					</Col>
					<Col span={8}>
						<FormItem
							label="包间类型："
							{...formItemLayout}
						>
							{getFieldDecorator('_query_name')(
								<Select placeholder="请选择包间类型">
										<Option value="0">女</Option>
										<Option value="1">男</Option>
								</Select>
							)}
						</FormItem>
					</Col>
					<Col span={8}>
						<Button onClick={handleSubmit} type="primary" style={{margin:"2px 16px 0 0"}}>搜索</Button>
						<Button onClick={handleReset}>清除条件</Button>
					</Col>
				</Row>
				
			</Form>
		</div>
	);
};

export default Form.create({
	onFieldsChange(props, changedFields) {
			props.onChange(changedFields);
	},
})(RoomsManageSearch);